<template>
  <div class="sales-ranking">
    <div class="card-header">
      <h3 class="card-title">产品销售排行榜</h3>
      <div class="period-selector">
        <el-radio-group v-model="selectedPeriod" @change="handlePeriodChange" size="small">
          <el-radio-button label="daily">日</el-radio-button>
          <el-radio-button label="monthly">月</el-radio-button>
          <el-radio-button label="quarterly">季</el-radio-button>
          <el-radio-button label="yearly">年</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    
    <div class="ranking-list">
      <div v-for="(item, index) in rankingData" :key="index" class="ranking-item">
        <div class="rank-number">
          <template v-if="index < 3">
            <div class="medal" :class="getMedalClass(index)">
              <el-icon><Trophy /></el-icon>
            </div>
          </template>
          <template v-else>
            {{ index + 1 }}
          </template>
        </div>
        <div class="product-info">
          <div class="product-name">{{ item.productName }}</div>
          <div class="product-meta">
            <span>销售量: {{ item.quantity }}</span>
          </div>
        </div>
        <div class="sales-amount">{{ formatCurrency(item.salesAmount) }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue'
import { Trophy } from '@element-plus/icons-vue'

interface RankingItem {
  rank: number
  productName: string
  salesAmount: number
  quantity: number
}

export default defineComponent({
  name: 'SalesRanking',
  components: {
    Trophy
  },
  props: {
    rankingData: {
      type: Array as PropType<RankingItem[]>,
      required: true
    },
    rankingPeriod: {
      type: String as PropType<'daily' | 'monthly' | 'quarterly' | 'yearly'>,
      default: 'monthly'
    }
  },
  emits: ['period-change'],
  setup(props, { emit }) {
    const selectedPeriod = ref(props.rankingPeriod)
    
    const handlePeriodChange = (period: string | number | boolean | undefined) => {
      if (typeof period === 'string') {
        emit('period-change', period)
      }
    }
    
    const formatCurrency = (value: number) => {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
      }).format(value)
    }
    
    const getMedalClass = (index: number) => {
      if (index === 0) return 'gold'
      if (index === 1) return 'silver'
      if (index === 2) return 'bronze'
      return ''
    }
    
    return {
      selectedPeriod,
      handlePeriodChange,
      formatCurrency,
      getMedalClass,
      Trophy
    }
  }
})
</script>

<style scoped lang="scss">
.sales-ranking {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  height: 100%;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .card-title {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .ranking-list {
    .ranking-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .rank-number {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
        color: #606266;
        
        .medal {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          
          &.gold {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
          }
          
          &.silver {
            background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
            box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
          }
          
          &.bronze {
            background: linear-gradient(135deg, #CD7F32, #8B4513);
            box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
          }
        }
      }
      
      .product-info {
        flex: 1;
        margin: 0 15px;
        
        .product-name {
          font-size: 14px;
          color: #303133;
          margin-bottom: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .product-meta {
          font-size: 12px;
          color: #909399;
        }
      }
      
      .sales-amount {
        font-size: 14px;
        font-weight: 600;
        color: #303133;
        white-space: nowrap;
      }
    }
  }
}
</style> 